<template>
  <div id="container">
    <div class="header">
      <span style="float: left;">书城机器人</span>
      <span style="float: right; cursor:pointer;" @click="close">x</span>
    </div>
    <ul class="contentt" style="white-space:pre-line;">
      <li v-for="(item, index) in messageList">
        <img class="imglt" :src="item.isSelf?limg:rimg" :class="'img'+(item.isSelf?'right':'left')">
        <span :class="'span'+(item.isSelf?'right':'left')">{{ item.message }}</span>
      </li>
    </ul>
    <div class="foote">
      <!-- 添加输入内容 -->
      <input id="text" type="text" placeholder="说点什么吧..." v-model="inputValue" @keyup.enter="chat">
      <!-- 给发送也绑定一个事件 -->
      <span id="btn" @click="chat">发送</span>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  data() {
    return {
        //输入内容,双向数据绑定
        inputValue: '',
        //聊天窗口内容
        messageList: [],
        limg:require('../assets/r.png'),
        rimg:require('../assets/l.png')
      }
  },
  mounted() {
    $.ajax({
      url: "http://api.ruyi.ai/v1/message?app_key=a72af046-d7bf-4173-a57c-d9e69d5097b6&user_id=wj&q=你会什么",
      success: (obj) => {
        console.log(obj);
        this.messageList.push({
          message: obj.result.intents[0].result.text,
          isSelf: false
        })
      }
    })
  },
  methods: {
    close(){
      this.$parent.robotB()
    },
    chat() {
      if (this.inputValue!==""){
        //获取自己输入内容,将内容渲染到页面
        this.messageList.push({
          message: this.inputValue,
          isSelf: true
        })
        let data=new URLSearchParams({
          app_key: "a72af046-d7bf-4173-a57c-d9e69d5097b6",
          user_id: "wj",
          q:this.inputValue,
          //机器人的记忆功能
          // "reset_session": true
        })
        // 获取机器人接口内容,也将内容渲染到页面
        $.ajax({
          url: 'http://api.ruyi.ai/v1/message?'+data,
          success: (obj) => {
            console.log(obj);
            let retval = obj.result.intents[0].result.text.replace(/\&name/g,"棚子" );
            //答案之书功能

            // 获取机器人接口内容,也将内容渲染到页面
            this.messageList.push({
              message: retval,
              isSelf: false
            })
            $('ul').bind("DOMNodeInserted",function () {
              $('ul').scrollTop($('.contentt')[0].scrollHeight)
            })
          }
        })
        this.inputValue = '';   //最后清除文本框
      }
    }
  },
};
</script>
<style>
#container {
  list-style: none;
  font-family: '微软雅黑'
}

#container {
  width: 280px;
  height: 480px;
  background: #eee;
  position: fixed;
  left: 30%;
  box-shadow: 20px 20px 55px #777;
}

.header {
  background: #000;
  height: 40px;
  color: #fff;
  line-height: 34px;
  font-size: 20px;
  padding: 0 10px;
}

.foote {
  width: 260px;
  height: 32px;
  background: #666;
  position: absolute;
  bottom: 0;
  padding: 10px;
  font-size: 10px;
}

.foote input {
  width: 165px;
  height: 25px;
  outline: none;
  font-size: 10px;
  text-indent: 10px;
  position: absolute;
  border-radius: 6px;
  right: 90px;
  bottom: 10px;
}

.foote span {
  display: inline-block;
  width: 62px;
  height: 25px;
  background: #ccc;
  font-weight: 800;
  line-height: 25px;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 10px;
  bottom: 12px;
  border-radius: 6px;
}

.foote span:hover {
  color: #fff;
  background: #999;
}

#container img {
  width: 40px;
  height: 40px;
}

.contentt {
  font-size: 10px;
  width: 270px;
  height: 350px;
  overflow: auto;
  padding: 5px;
}

.contentt li {
  margin-top: 10px;
  padding-left: 2px;
  width: 250px;
  max-height: 250px;
  display: block;
  clear: both;
  overflow: hidden;
}

.contentt li img {
  float: left;
}

.contentt li span {
  background: #7cfc00;
  padding: 10px;
  border-radius: 10px;
  float: left;
  margin: 0px 10px 0 10px;
  max-width: 150px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px #ccc;
}

.contentt li img.imgleft {
  float: left;
}

.contentt li img.imgright {
  float: right;
}

.contentt li span.spanleft {
  float: left;
  background: #fff;
}

.contentt li span.spanright {
  float: right;
  background: #7cfc00;
}
</style>
